<!-- 拒绝工单 -->
<template>
  <ve-modal v-model="visible" title="拒绝原因" cancelText="取消" @cancel="onCancel" @confirm="formSubmit" :okLoading="okLoading">
    <ve-form ref="ve_form" :model="form" :rules="rules">
      <!-- <ve-card type="none" fold v-model:initFold="foldStatus.fold1"> -->
        <ve-form-item label="拒绝原因" labelPosition="top" :borderBottom="false" prop="refuseWorkReason" required>
          <ve-input type="textarea" v-model="form.refuseWorkReason" placeholder="请输入" :maxlength="100" />
        </ve-form-item>
      <!-- </ve-card> -->
    </ve-form>
  </ve-modal>
</template>

<script setup name="refuseModal">
  import { ref, nextTick } from 'vue'
  import FilterNavbar from '@/components/FilterNavbar'
  import { refuseWorkAPI } from '@/api/order/workOrder'
  import useFormFold from '@/hooks/useFormFold'
  const emits = defineEmits(['ok'])
  const initFold1 = ref(true)
  const record = ref(null)
  const visible = ref(false)
  const form = ref({
    id: '',
    refuseWorkReason: ''
  })
  const { foldStatus, foldValidate } = useFormFold([
    {
      key: 'fold1',
      props: ['refuseWorkReason'],
    },
  ])
  const rules = ref({
    refuseWorkReason: {
      required: true,
      message: '请填写拒绝原因',
    },
  })
  const toast = (e) => {
    uni.showToast({
      title: e,
      icon: 'none',
    })
  }
  const onCancel = () => {
    visible.value = false
  }
  const open = (record) => {
    visible.value = true
    console.log(record)
    record.value = record
    form.value.id = record.value.id
    form.value.refuseWorkReason = ''
  }
  const ve_form = ref(null)
  const okLoading = ref(false)
  const formSubmit = () => {
    ve_form.value.validate((valid, errors) => {
      console.log(valid)
      if (valid) {
        var res
        var params = {
          ...form.value,
        }
        okLoading.value = true
        refuseWorkAPI(params)
          .then((res) => {
            okLoading.value = false
            if (res.code == 200) {
              toast(res.message)
              emits('ok')
              visible.value = false
            } else {
              toast(res.message)
              return false
            }
          })
          .catch(() => {
            okLoading.value = false
          })
      } else {
        foldValidate(errors)
        console.log('验证失败', errors)
      }
    })
  }
  defineExpose({
    open,
  })
</script>

<style lang="scss" scoped>
  .container {
    background: #f7f8fa;
  }

  .viewports {
    display: flex;
    flex-direction: column;
    padding: 24rpx;
  }
</style>
